<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>添加账单</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/add-account.css" rel="stylesheet">
    <link href="../../js/lib/LCalendar/LCalendar.css" rel="stylesheet">
    <link href="../../js/lib/ios_select/iosSelect.css" rel="stylesheet">
</head>
<body id="add-account">
<div class="container">
    <div class="head green">
        <div class="head-content"><i class="icon iconfont icon-xianxiazhifu"></i><div class="fr"><input type="text" name="price" value="0" readonly/>RMB</div></div>
        <i class="no icon iconfont icon-cuo"></i>
        <i class="yes icon iconfont icon-gou"></i>
    </div>

    <div class="main">
        <ul>
            <li><div class="left" style="width:100%"><i class="icon iconfont icon-bi"></i><input type="text" name="remark" placeholder="备注" style="width:90%" /></div></li>
            <li>
                <div class="left"><i class="icon iconfont icon-kechengbiao"></i><input type="text" name="tradeDate" id="tradeDate" placeholder="预设交易日期" readonly /></div>
                <div class="right" id="remind_select_contact"><i class="icon iconfont icon-naozhong"></i><input type="hidden" name="isRemind" /><input type="hidden" name="remindTime" /><span id="remind_show_contact">设置提醒</span></div>
            </li>
            <li>
                <div class="left" id="repeat_select_contact"><i class="icon iconfont icon-shuaxin"></i><input type="hidden" name="num" value="0"/><input type="hidden" name="unit" /><span id="repeat_show_contact">设置重复</span></div>
                <div class="right hide" id="times_select_contact"><i class="icon iconfont icon-shuaxin"></i><input type="hidden" name="times" value="0" /><span id="times_show_contact">设置期数</span></div>
            </li>
            <li><div class="left"><i class="icon iconfont icon-zhifufangshi"></i><span>支付方式</span></div></li>
        </ul>
        <table>
            <tbody>
            <tr class="icon">
                <td><div class="icon-box zfb"></div></td>
                <td><div class="icon-box wx"></div></td>
                <td><div class="icon-box xj"></div></td>
                <td><div class="icon-box rectangle yhk"></div></td>
                <td><div class="icon-box rectangle xyk"></div></td>
            </tr>
            <tr class="num">
                <td><span>0</span><i class="icon iconfont icon-xianjin"></i></td>
                <td><span>0</span><i class="icon iconfont icon-xianjin"></i></td>
                <td><span>0</span><i class="icon iconfont icon-xianjin"></i></td>
                <td><span>0</span><i class="icon iconfont icon-xianjin"></i></td>
                <td><span>0</span><i class="icon iconfont icon-xianjin"></i></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="foot">
        <div class="line border"><div class="left"><i class="icon iconfont icon-pingzheng"></i>上传凭证</div><a class="right">点击上传></a></div>
        <div class="line"><div class="left"><a href="../communication/personal-select.html"><i class="icon iconfont icon-duixiang"></i>交易对象</a></div></div>

    </div>

    <div class="mask"></div>

    <ul id="select-income" class="hide">
        <li><i class="icon iconfont icon-xianjin"></i><p>工资</p></li>
        <li><i class="icon iconfont icon-shouru"></i><p>分红</p></li>
        <li><i class="icon iconfont icon-shenglvehao"></i><p>其他</p></li>
    </ul>

    <ul id="select-expend" class="hide">
        <li><i class="icon iconfont icon-tb17"></i><p>家庭</p></li>
        <li><i class="icon iconfont icon-kafeiting"></i><p>生活</p></li>
        <li><i class="icon iconfont icon-gongzuo"></i><p>工作</p></li>
        <li><i class="icon iconfont icon-yule"></i><p>娱乐</p></li>
    </ul>

</div>

<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/layer_mobile/layer.js"></script>
<script src="../../js/lib/LCalendar/LCalendar.js"></script>
<script src="../../js/lib/ios_select/iosSelect.js"></script>
<script src="../../js/lib/ios_select/iscroll.js"></script>
<script>
    /*支付方式*/
    var pay_index;
    /*第一项支付方式*/
    var first_pay_index;

    /*时间控件*/
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '#tradeDate', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': '1900-1-1', //最小日期
        'maxDate': '2100-1-1' //最大日期
    });

    /*选择收支类型弹窗*/
    $(".head-content").click(function(){
        layer.open({
            content: "<div class='top-floor'>" +
            "<div class='head'><span class='hover'>收入</span><span>支出</span></div>"+
            "<div class='content'><ul></ul><ul class='hide'></ul></div></div>" +
            "<div class='bottom-floor total'>" +
            "<table><tbody><tr><td>1</td><td>2</td><td>3</td></tr>" +
            "<tr><td>4</td><td>5</td><td>6</td></tr>" +
            "<tr><td>7</td><td>8</td><td>9</td></tr>" +
            "<tr><td>0</td><td>.</td><td><i class='icon iconfont icon-iconfrontfuzhi'></i></td></tr>" +
            "<tr><td colspan='1' class='cancel'>取消</td><td colspan='2' class='yes'>确认</td></tr></tbody></table>" +
            "</div>",
            className:'layer-top-box',
            shade: 'background-color: rgba(0,0,0,.3)',
            style:'background:0 0;position:fixed;bottom:0;left:0;width:100%;',
            success: function () {
                $(".layer-top-box ul").eq(0).html($("#select-income").html());
                $(".layer-top-box ul").eq(1).html($("#select-expend").html())
            }
        });
    });
    /*收入开支选择*/
    $("#add-account").on('click','.layer-top-box .head span',function () {
       $(this).addClass('hover').siblings().removeClass('hover');
       var index = $(this).index();
       $(this).parent().parent().find('ul').eq(index).show().siblings().hide()
    });
    /*账目具体类型选择*/
    $("#add-account").on('click','.layer-top-box .content li',function () {
        var color = $(this).find('i').css('color');
        $(".layer-top-box .content li").removeClass('hover').css('background-color','#fff');
        $(this).addClass('hover').siblings().removeClass('hover');
        $(this).css("background-color",color)
    });
    /*总账目数字输入*/
    $("#add-account").on('click',".layer-top-box .bottom-floor.total td",function () {
        if( $(this).hasClass('cancel') || $(this).hasClass('yes') ){

        }else{
            var text = $(this).text();
            var temp = $("input[name='price']").val();
            if(text==""){
                temp = temp.substring(0,temp.length-1);
                if(temp+text==""){
                    $("input[name='price']").val(0)
                }else{
                    $("input[name='price']").val(temp+text)
                }
            }else if(text=="." && temp.indexOf('.')!=-1){

            }else if(text=="." && temp=="0"){
                $("input[name='price']").val('0.')
            }else if(temp=="0"){
                $("input[name='price']").val(text)
            }else{
                $("input[name='price']").val(temp+text)
            }
        }
    });
    /*总账目确认*/
    $("#add-account").on('click','.layer-top-box .bottom-floor .yes',function () {
        var str = $(".layer-top-box .content li.hover i").prop('className');
        if( typeof(str) != 'undefined' ){
            var arr = str.split(' ');
            var className = arr.pop();
            $(".head-content i").remove();
            $(".head-content .fr").before("<i class='icon iconfont "+ className + "'></i>");
            var temp = Math.abs($("input[name='price']").val());
            if( $(".layer-top-box .head span.hover").index() == 0 ){
                $(".head").removeClass('red').addClass('green');
                $("input[name='price']").val('+'+temp);
            }else if( $(".layer-top-box .head span.hover").index() == 1 ){
                $(".head").removeClass('green').addClass('red');
                $("input[name='price']").val('-'+temp);
            }
            $(".icon .icon-box").removeClass('active');
            $(".num td").removeClass('green');
            $(".num td span").text(0);
            layer.closeAll()
        }
    });
    /*设置提醒*/
    $('#remind_select_contact').bind('click', function () {
        var iosSelect = new IosSelect(1,
            [
                [{'id':'0','value':'交易当天'}, {'id':'1','value':'1天前'}, {'id':'3','value':'2天前'}, {'id':'3','value':'3天前'}, {'id':'4','value':'4天前'}, {'id':'5','value':'5天前'}, {'id':'6','value':'6天前'}, {'id':'7','value':'7天前'}]
            ],
            {
                title: '设置提醒',
                itemHeight: 35,
                callback: function (selectOneObj) {
                    $("input[name='isRemind']").val(1);
                    $("input[name='remindTime']").val(selectOneObj.id);
                    $('#remind_show_contact').text(selectOneObj.value);
                }
            });
    });
    /*设置时间间隔*/
    $('#repeat_select_contact').bind('click', function () {
        var iosSelect = new IosSelect(3,
            [
                [{'id':'-1','value':'每'}],
                [{'id':'1','value':'1'}, {'id':'2','value':'2'}, {'id':'3','value':'3'}, {'id':'4','value':'4'}, {'id':'5','value':'5'}, {'id':'6','value':'6'}, {'id':'7','value':'7'}, {'id':'8','value':'8'}, {'id':'9','value':'9'}],
                [{'id':'day','value':'天'}, {'id':'week','value':'周'}, {'id':'month','value':'月'}, {'id':'year','value':'年'}]
            ],
            {
                title: '设置重复',
                itemHeight: 35,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    $("input[name='num']").val(selectTwoObj.id);
                    $("input[name='unit']").val(selectThreeObj.id);
                    $('#repeat_show_contact').text(selectOneObj.value + selectTwoObj.value + selectThreeObj.value);
                    $("#times_select_contact").show()
                }
            });
    });
    /*设置期数*/
    $('#times_select_contact').bind('click', function () {
        var iosSelect = new IosSelect(3,
            [
                [{'id':'0','value':'0'},{'id':'1','value':'1'},{'id':'2','value':'2'},{'id':'3','value':'3'},{'id':'4','value':'4'},{'id':'5','value':'5'},{'id':'6','value':'6'},{'id':'7','value':'7'},{'id':'8','value':'8'},{'id':'9','value':'9'}],
                [{'id':'0','value':'0'},{'id':'1','value':'1'},{'id':'2','value':'2'},{'id':'3','value':'3'},{'id':'4','value':'4'},{'id':'5','value':'5'},{'id':'6','value':'6'},{'id':'7','value':'7'},{'id':'8','value':'8'},{'id':'9','value':'9'}],
                [{'id':'1','value':'1'},{'id':'2','value':'2'},{'id':'3','value':'3'},{'id':'4','value':'4'},{'id':'5','value':'5'},{'id':'6','value':'6'},{'id':'7','value':'7'},{'id':'8','value':'8'},{'id':'9','value':'9'}]
            ],
            {
                title: '设置(百位、十位、个位)期',
                itemHeight: 35,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    $("input[name='times']").val(parseInt(selectOneObj.value + selectTwoObj.value + selectThreeObj.value));
                    $('#times_show_contact').text(parseInt(selectOneObj.value + selectTwoObj.value + selectThreeObj.value)+'期');
                }
            });
    });
    /*支付方式选择*/
    $(".icon td").click(function(){
        if($(".icon-box.active").length==0){
            first_pay_index = $(this).index();
            $(this).find('div').addClass('active');
            $(".num td").eq(first_pay_index).addClass('green');
            var value = Math.abs($("input[name='price']").val());
            $(".num td").eq(first_pay_index).find('span').text(value)
        }else if(!$(this).find('div').hasClass('active')){
            pay_index = $(this).index();
            layer.open({
                content: "<div class='bottom-floor single' style='margin:0'>" +
                "<table><tbody><tr><td>1</td><td>2</td><td>3</td></tr>" +
                "<tr><td>4</td><td>5</td><td>6</td></tr>" +
                "<tr><td>7</td><td>8</td><td>9</td></tr>" +
                "<tr><td>0</td><td>.</td><td><i class='icon iconfont icon-iconfrontfuzhi'></i></td></tr>" +
                "<tr><td colspan='1' class='cancel2'>取消</td><td colspan='2' class='yes'>确认</td></tr></tbody></table>" +
                "</div>",
                className:'layer-top-box',
                shade: 'background-color: rgba(0,0,0,.3)',
                style:'background:0 0;position:fixed;top:6rem;left:0;width:100%;',
                shadeClose:false
            });
        }else{
            $(".icon td div").removeClass('active');
            $(".num td").removeClass('green');
            $(".num td span").text(0);
        }

    });

    /*子账目数字输入*/
    $("#add-account").on('click',".layer-top-box .bottom-floor.single td",function () {
        if( $(this).hasClass('cancel2') || $(this).hasClass('yes') ){

        }else{
            var dom = $('.num td').eq(pay_index).find('span');
            var text = dom.text();
            var input = $(this).text();
            if( input == "" ){
                var temp = text.substring(0,text.length-1);
                if( text == '0' || temp == '' ){
                    dom.text(0)
                }else{
                    dom.text(temp)
                }
            }else if( input=="." && text.indexOf('.')!=-1){

            }else if( input=="." && text=="0" ){
                dom.text('0.')
            }else if( text=="0" ){
                dom.text(input)
            }else{
                dom.text(text+input)
            }
        }
    });
    /*子账目确认*/
    $("#add-account").on('click','.layer-top-box .bottom-floor.single .yes',function () {
        var pay_index_amount = $('.num td').eq(pay_index).find('span').text();
        var first_pay_index_amount = $('.num td').eq(first_pay_index).find('span').text();
        if( parseFloat(pay_index_amount) > parseFloat(first_pay_index_amount) ){
            $('.num td').eq(pay_index).find('span').text(0);
            layer.open({
                content: '该输入金额不能超过第一项的金额'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
        }else if( pay_index_amount.substr(pay_index_amount.length-1,1) == '.' ){
            $('.num td').eq(pay_index).find('span').text(0);
            layer.open({
                content: '请输入正确的金额格式'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
        }else{
            $('.num td').eq(first_pay_index).find('span').text(first_pay_index_amount - pay_index_amount);
            $('.icon td').eq(pay_index).find('div').addClass('active');
            $('.num td').eq(pay_index).addClass('green');
            layer.closeAll()
        }
    });
    /*子账目取消*/
    $("#add-account").on('click','.cancel2',function () {
        $('.num td').eq(pay_index).find('span').text(0);
        layer.closeAll()
    });

    /*上传弹窗*/
    $(".foot a").click(function(){
        layer.open({
            content: "<div>" +
            "<div class='container'><div class='shot line border'>拍摄</div>" +
            "<div class='select line'>从相册选择</div></div>" +
            "<div class='cancel line'>取消</div></div>",
            className:'layer-bottom-box',
            shade: 'background-color: rgba(0,0,0,.3)',
            anim: 'up',
            fixed: false,
            top: -150,
            style:'background:0 0;'
        });
    });
    $("#add-account").on('click','.cancel',function () {
        layer.closeAll()
    });
    $("#add-account").on('click','.shot',function () {
        /*拍摄*/
    });
    $("#add-account").on('click','.select',function () {
        /*从相册选择*/
    })
</script>
</body>
</html>